<template>
  <div class="app-container">
    <el-form
      v-show="!isPack"
      :model="queryParams"
      :rules="queryRules"
      ref="queryForm"
      label-width="110px"
    >
      <el-row :gutter="40">
        <el-col :span="24">
          <el-col :xs="24" :sm="12" :md="6" :lg="6"
            ><el-form-item label="物品类型">
              <el-select
                v-model="queryParams.goodsType"
                placeholder="请选择物品类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in pTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>

          <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <el-form-item label="身份证号">
              <el-input
                style="width: 100%"
                v-model="queryParams.idNumber"
                placeholder="请输入"
                clearable
              /> </el-form-item
          ></el-col>

          <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <el-form-item label="当事人">
              <el-input
                style="width: 100%"
                clearable
                v-model="queryParams.parties"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <el-form-item label="物品名称" style="width: 100%">
              <el-input clearable v-model="queryParams.goodsName" placeholder="请输入"> </el-input>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-col :xs="24" :sm="12" :md="6" :lg="6"
            ><el-form-item label="办案单位">
              <el-input v-model="queryParams.unit" placeholder="请输入" clearable /> </el-form-item
          ></el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <el-form-item label="是否返还">
              <el-select
                style="width: 100%"
                v-model="queryParams.isReturn"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6"
            ><el-form-item label="存放区域">
              <el-select
                style="width: 100%"
                v-model="queryParams.lowerWrit"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in depotList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6"
            ><el-form-item label="办案人员" prop="phName">
              <el-select
                style="width: 100%"
                v-model="queryParams.phName"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择"
              >
                <el-option
                  v-for="item in personList"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-col>
        <el-col :span="24">
          <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <el-form-item label="物品编号">
              <el-input
                clearable
                style="width: 100%"
                v-model="queryParams.goodsId"
                placeholder="请输入"
              >
              </el-input> </el-form-item
          ></el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <el-form-item label="违法行为">
              <el-input
                clearable
                style="width: 100%"
                v-model="queryParams.unlawfulAct"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <el-form-item label="执法领域">
              <el-select
                clearable
                style="width: 100%"
                v-model="queryParams.enforceDomain"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in depotList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <el-form-item label="车牌">
              <el-input
                clearable
                style="width: 100%"
                v-model="queryParams.plateNum"
                placeholder="请输入"
              >
              </el-input> </el-form-item
          ></el-col>
        </el-col>

        <el-col :span="24">
          <el-col :xs="24" :sm="12" :md="6" :lg="6"
            ><el-form-item label="物品状态">
              <el-select
                clearable
                style="width: 100%"
                v-model="queryParams.goodsStatus"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in goodsStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6"
            ><el-form-item label="违法地点">
              <el-input
                clearable
                style="width: 100%"
                v-model="queryParams.unlawfulAddress"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <el-form-item label="手机号码" prop="photo">
              <el-input
                style="width: 100%"
                v-model="queryParams.photo"
                placeholder="请输入"
                clearable
              ></el-input> </el-form-item
          ></el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <el-form-item label="立案号">
              <el-input
                style="width: 100%"
                v-model="queryParams.registerNum"
                placeholder="请输入"
                clearable
              ></el-input> </el-form-item
          ></el-col>
        </el-col>
        <el-col :span="24">
          <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <el-form-item label="出库时间">
              <el-date-picker
                v-model="queryParams.comeTime"
                placeholder="请选择"
                clearable
              ></el-date-picker> </el-form-item
          ></el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6"
            ><el-form-item label="采取措施日期">
              <el-date-picker
                v-model="queryParams.ConstraintTime"
                placeholder="请选择"
                clearable
              ></el-date-picker> </el-form-item
          ></el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6"
            ><el-form-item label="解除措施日期">
              <el-date-picker
                v-model="queryParams.relieveConstraintTime"
                placeholder="请选择"
                clearable
              ></el-date-picker> </el-form-item
          ></el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6"
            ><el-form-item label="入库时间">
              <el-date-picker
                v-model="queryParams.enertTime"
                placeholder="请选择"
                clearable
              ></el-date-picker> </el-form-item
          ></el-col>
        </el-col>

        <el-col :span="24">
          <el-col :xs="24" :sm="12" :md="6" :lg="6"
            ><el-form-item label="处罚决定书编号">
              <el-input
                clearable
                style="width: 100%"
                v-model="queryParams.noticeNum"
                placeholder="请输入"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6"
            ><el-form-item label="放行文书编号">
              <el-input
                clearable
                style="width: 100%"
                v-model="queryParams.lightWritNum"
                placeholder="请输入"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6"
            ><el-form-item label="解除扣押编号">
              <el-input
                v-model="queryParams.relieveDetainNum"
                placeholder="请输入"
                clearable
                style="width: 100%"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <el-form-item label="暂扣文书编号">
              <el-input
                v-model="queryParams.temporaryWritNum"
                placeholder="请输入"
                clearable
                style="width: 100%"
              ></el-input> </el-form-item
          ></el-col>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="24">
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :offset="20">
          <el-button
            :loading="loading"
            type="primary"
            icon="el-icon-search"
            size="medium"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button :loading="loading" icon="el-icon-refresh" size="medium" @click="resetQuery"
            >重置</el-button
          >
          <el-button type="text" size="medium" @click="isPack = !isPack">
            <span v-show="!isPack">收起<i class="el-icon-arrow-up el-icon--right"></i> </span>
            <span v-show="isPack">放下<i class="el-icon-arrow-down el-icon--right"></i></span>
          </el-button>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listWarehouse } from '@/api/warehouse/list'
import { personnelDispose } from '@/api/property/dispose.js'

export default {
  props: ['loading', 'queryParams'],
  data() {
    return {
      // 搜索表单校验
      queryRules: {
        phone: {
          pattern: /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/,
          message: '请输入正确的手机号码'
        }
      },
      stateOptions: [
        { value: 0, label: '异常' },
        { value: 1, label: '举报' }
      ],
      status: [
        { value: 1, label: '是' },
        { value: 0, label: '否' }
      ],
      pTypeOptions: [
        {
          label: '普通物品',
          value: '1'
        },
        {
          label: '特殊物品',
          value: '2'
        },
        {
          label: '车辆',
          value: '3'
        }
      ],
      // 存放区域列表
      depotList: [],
      // 办案人员列表
      personList: [],
      // 物品状态列表
      goodsStatus: [
        {
          value: 0,
          label: '没有任何操作'
        },
        {
          value: 1,
          label: '退还'
        },
        {
          value: 2,
          label: '移交'
        },
        {
          value: 3,
          label: '销毁'
        }
      ],
      isPack: false
    }
  },
  created() {
    listWarehouse().then((e) => {
      e.rows.forEach((i) => {
        this.depotList.push({ label: i.name, value: i.id })
      })
    })
    // 处理办案人员数据
    personnelDispose().then((e) => {
      this.personList = e
    })
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          this.queryParams.pageNum = 1
          this.$emit('updateList')
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$emit('reset', {})
      this.$emit('updateList')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.app-container {
  .el-form-item__content {
    width: 65%;
  }
  .el-date-editor {
    width: 100%;
  }
}
</style>
